<template>
    <div id="map" style="width: 600px; height: 500px;">地图</div>
  </template>
  
  <script setup>
  import { defineProps, onMounted, watch,ref } from 'vue';
  import * as echarts from 'echarts';
  import $ from 'jquery';
  
//   // 定义 props，接收父组件传递的数据
//   const props = defineProps({
//     childData4: Array
//   });
  
//   // 定义 city_data 数组，用于存储城市信息
//   const city_data = [];
  
//   // 监听 childData4 的变化
//   watch(() => props.childData4, (newVal) => {
//     // 清空 city_data 数组
//     city_data.splice(0, city_data.length);
  
//     // 将新的数据添加到 city_data 数组中
//     newVal.forEach(item => {
//       city_data.push(item);
//         console.log(city_data)
//     });
//   });
const props = defineProps({
    childData4: Array
  });
  // 在 mounted 钩子中初始化 ECharts 实例
  onMounted(() => {
    const city_data = ref([]);

   
    // 基于准备好的 dom，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('map'));
  
    var provinces = {
      '上海': '/get/s/data-1482909900836-H1BC_1WHg.json',
      '河北': '/get/s/data-1482909799572-Hkgu_yWSg.json',
      '山西': '/get/s/data-1482909909703-SyCA_JbSg.json',
      '内蒙古': '/get/s/data-1482909841923-rkqqdyZSe.json',
      '辽宁': '/get/s/data-1482909836074-rJV9O1-Hg.json',
      '吉林': '/get/s/data-1482909832739-rJ-cdy-Hx.json',
      '黑龙江': '/get/s/data-1482909803892-Hy4__J-Sx.json',
      '江苏': '/get/s/data-1482909823260-HkDtOJZBx.json',
      '浙江': '/get/s/data-1482909960637-rkZMYkZBx.json',
      '安徽': '/get/s/data-1482909768458-HJlU_yWBe.json',
      '福建': '/get/s/data-1478782908884-B1H6yezWe.json',
      '江西': '/get/s/data-1482909827542-r12YOJWHe.json',
      '山东': '/get/s/data-1482909892121-BJ3auk-Se.json',
      '河南': '/get/s/data-1482909807135-SJPudkWre.json',
      '湖北': '/get/s/data-1482909813213-Hy6u_kbrl.json',
      '湖南': '/get/s/data-1482909818685-H17FOkZSl.json',
      '广东': '/get/s/data-1482909784051-BJgwuy-Sl.json',
      '广西': '/get/s/data-1482909787648-SyEPuJbSg.json',
      '海南': '/get/s/data-1482909796480-H12P_J-Bg.json',
      '四川': '/get/s/data-1482909931094-H17eKk-rg.json',
      '贵州': '/get/s/data-1482909791334-Bkwvd1bBe.json',
      '云南': '/get/s/data-1482909957601-HkA-FyWSx.json',
      '西藏': '/get/s/data-1482927407942-SkOV6Qbrl.json',
      '陕西': '/get/s/data-1482909918961-BJw1FyZHg.json',
      '甘肃': '/get/s/data-1482909780863-r1aIdyWHl.json',
      '青海': '/get/s/data-1482909853618-B1IiOyZSl.json',
      '宁夏': '/get/s/data-1482909848690-HJWiuy-Bg.json',
      '新疆': '/get/s/data-1482909952731-B1YZKkbBx.json',
      '北京': '/get/s/data-1482818963027-Hko9SKJrg.json',
      '天津': '/get/s/data-1482909944620-r1-WKyWHg.json',
      '重庆': '/get/s/data-1482909775470-HJDIdk-Se.json',
      '香港': '/get/s/data-1461584707906-r1hSmtsx.json',
      '澳门': '/get/s/data-1482909771696-ByVIdJWBx.json'
    };
  
    // 加载全国地图
    loadMap('/get/s/data-1527045631990-r1dZ0IM1X.json', 'china');
  
    var timeFn = null;
  
    // 单击切换到省级地图
    myChart.on('click', function(params) {
      clearTimeout(timeFn);
      timeFn = setTimeout(function() {
        var name = params.name; // 地区 name
        var mapCode = provinces[name]; // 地区的 json 数据
        if (!mapCode) {
          alert('无此区域地图显示');
          return;
        }
        loadMap(mapCode, name);
      }, 250);
    });
  
    // 双击返回全国地图
    myChart.on('dblclick', function() {
      clearTimeout(timeFn);
      loadMap('/get/s/data-1527045631990-r1dZ0IM1X.json', 'china');
    });
  
    /**
     * 获取对应的 json 地图数据，然后向 echarts 注册该区域的地图，最后加载地图信息
     * @param {String} mapCode json 数据的地址
     * @param {String} name 地图名称
     */
    function loadMap(mapCode, name) {
      $.get(mapCode, function(data) {
        if (data) {
          echarts.registerMap(name, data);
          var option = {
            tooltip: {
              show: true,
              formatter: function(params) {
                if (params.data) return params.name + '：' + params.data['value']
              },
            },
            visualMap: {
              type: 'continuous',
              text: ['', ''],
              showLabel: true,
              left: '50',
              min: 0,
              max: 100,
              inRange: {
                color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
              },
              splitNumber: 0
            },
            series: [{
              name: 'MAP',
              type: 'map',
              mapType: name,
              selectedMode: 'false', // 是否允许选中多个区域
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: city_data.value
            }]
          };
          myChart.setOption(option);
        } else {
          alert('无法加载该地图');
        }
      });
    }
    watch(() => props.childData4, (newVal) => {
        city_data.value = newVal;  // 更新城市数据
    loadMap('/get/s/data-1527045631990-r1dZ0IM1X.json', 'china');  // 加载全国地图
  });
  });
  </script>
  